<template>
  <div class="ForGetPage">
    <div class="Box">
      <div class="Forget_top">
        <i class="el-icon-back" @click="back"></i>
        <p>找回密码</p>
      </div>

      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="user">
          <el-input
            prefix-icon="iconfont icon-cc-user"
            type="text"
            v-model="ruleForm.user"
            placeholder="请输入手机号"
          />
        </el-form-item>

        <el-form-item prop="Yzm">
          <el-input
            type="text"
            prefix-icon="iconfont icon-lock "
            v-model="ruleForm.Yzm"
            placeholder="请输入验证码"
          />
          <span class="Yz" @click="Yzm_Click">{{TextYzm}}</span>
        </el-form-item>

        <el-form-item prop="pass">
          <el-input
            type="password"
            prefix-icon="iconfont icon-caigoutonggerenbangaobaozhenzhucedenglu18"
            v-model="ruleForm.pass"
            placeholder="请输入密码"
            :show-password="true"
          />
        </el-form-item>

        <el-form-item prop="checkPass">
          <el-input
            type="password"
            prefix-icon="iconfont icon-caigoutonggerenbangaobaozhenzhucedenglu18"
            v-model="ruleForm.checkPass"
            placeholder="请再次输入密码"
            :show-password="true"
          />
        </el-form-item>
      </el-form>
      <div class="btn_box">
        <div class="Btn">
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ForGetPage",
  data() {
    var validateuser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validateYzm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      TextYzm: "点击发送",
      ruleForm: {
        pass: "",
        user: "",
        checkPass: "",
        Yzm: "",
      },
      rules: {
        user: [{ validator: validateuser, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        Yzm: [{ validator: validateYzm, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    Yzm_Click() {
      let num = 60;
      var timer = setInterval(() => {
        num--;
        this.TextYzm = `重新发送(${num})`;

        if (num == 0) {
          clearInterval(timer);
          this.TextYzm = `点击发送`;
        }
      }, 1000);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push("/");
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style  lang="less">
.ForGetPage {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/new_bj.jpg") no-repeat center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .Box {
    width: 51.58rem;
    height: 68.08rem;
    background: #fff;
    border-radius: 10px;
    .Forget_top {
      width: 100%;
      i {
        font-size: 30px;
        margin: 10px 0 0 10px;
        cursor: pointer;
        color: #34a1ff;
      }
      p {
        font-size: 2.6rem;
        color: rgba(77, 77, 77, 1);
        text-align: center;
        margin-top: 3.9rem;
      }
    }

    form {
      width: 100%;
      margin-top: 3.4rem;
      .el-form-item {
        div {
          width: 80%;
          margin-left: -1.67rem;
          margin-top: 1rem;

          input {
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid #ccc;
            line-height: 3.92rem;
          }
        }
        .Yz {
          width: 9rem;
          display: inline-block;
          border: 1px solid #dbd9da;
          font-size: 0.917rem;
          background: #fbf9fa;
          line-height: 2.5rem;
          text-align: center;
          box-sizing: border-box;
          cursor: pointer;
          color: #74bdff;
        }
      }
    }
    .btn_box {
      display: flex;
      justify-content: center;
      margin-top: 3.67rem;
      .Btn {
        width: 22.5rem;
        .el-button {
          width: 100%;
          letter-spacing: 0.3rem;
        }
      }
    }
  }
}
</style>